<template>
	<view class="content">
		<u-toast ref="uToast" />
		<view class="info_content">
			<view class="row">
				<view class="nominal">身高</view>
				<view class="input"><input name="height" v-model="form.height" type="number" placeholder-class="input_pla" /><span>cm</span></view>
			</view>
			<view class="row">
				<view class="nominal">体重</view>
				<view class="input"><input name="weight" v-model="form.weight" type="number" placeholder-class="input_pla" /><span>kg</span></view>
			</view>
			<view class="row">
				<view class="nominal">年龄</view>
				<view class="input"><input name="weight" v-model="form.age" placeholder="请填写" type="number" placeholder-class="input_pla" /></view>
			</view>
			<view class="row">
				<view class="nominal">品牌</view>
				<view class="input"><input name="brand" v-model="form.brand" placeholder="请填写喜欢的品牌" type="text" placeholder-class="input_pla" /></view>
			</view>
			<picker @change="bindPickerChange1" :value="form.job" :range="jobList" range-key="value">
				<view class="row">
					<view class="nominal">职业</view>
					<view class="input flex_index">
						<view class="text">{{ isBlank(form.job) ? "请选择" : form.job }}</view>
						<view class="icon xiangyou" style="color: #666666"></view>
					</view>
				</view>
			</picker>
			<picker @change="bindPickerChange2" :value="form.sex" :range="sexList" range-key="label">
				<view class="row">
					<view class="nominal">性别</view>
					<view class="input flex_index">
						<view class="text">
							<span v-if="isBlank(form.sex)">请选择</span>
							<span v-if="form.sex === 0">男士</span>
							<span v-if="form.sex === 1">女士 </span>
						</view>
						<view class="icon xiangyou" style="color: #666666"></view>
					</view>
				</view>
			</picker>
			<picker @change="bindPickerChange3" :value="form.budget" :range="budgetList" range-key="value">
				<view class="row">
					<view class="nominal">预算</view>
					<view class="input flex_index">
						<view class="text">{{ isBlank(form.budget) ? "请选择" : form.budget }}</view>
						<view class="icon xiangyou" style="color: #666666"></view>
					</view>
				</view>
			</picker>
			<picker @change="bindPickerChange4" :value="form.occasion" :range="occasionList" range-key="value">
				<view class="row">
					<view class="nominal">出席场合</view>
					<view class="input flex_index">
						<view class="text">{{ isBlank(form.occasion) ? "请选择" : form.occasion }}</view>
						<view class="icon xiangyou" style="color: #666666"></view>
					</view>
				</view>
			</picker>
		</view>

		<view class="out_title">备注</view>

		<view class="list" style="margin-bottom: 32upx;">
			<view style="padding: 16upx 20upx;">
				<u-input v-model="form.remark" type="textarea" :border="false" :height="196" :auto-height="true" placeholder='请输入您的对你搭配上的要求' />
			</view>
		</view>

		<block v-if="!isBlank(form.sex)">
			<view class="out_title" style="display: flex;align-items: center;margin-top: 50upx;">
				<view>更多选择</view>
				<view class="icon xia" style="margin-left: 11upx;"></view>
			</view>
			<view class="list">
				<view class="photo_area">
					<u-collapse>
						<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :key="index">
							<!-- 脸型 -->
							<view class="wrap" v-if="item.body === 'lianxing'">
								<u-row gutter="16" justify="space-between">
									<u-col span="6" v-for="lx in lianxingData" @click="selectLianXing(lx)">
										<view class="demo-layout bg-purple-light" :class="{select_Border: lx.selected}">
											<image :src="lx.src" mode="scaleToFill"></image>
										</view>
										<view class="wrap_text">{{ lx.name }}</view>
									</u-col>
								</u-row>
							</view>
							<!-- 肤色 -->
							<view class="wrap" v-if="item.body === 'fuse'">
								<u-row gutter="16" justify="space-between">
									<u-col span="6" v-for="fs in fuseData" @click="selectFuse(fs)">
										<view class="demo-layout bg-purple-light" :class="{select_Border: fs.selected}">
											<image :src="fs.src" mode="scaleToFill"></image>
										</view>
										<view class="wrap_text">{{ fs.name }}</view>
									</u-col>
								</u-row>
							</view>
							<!-- 体型 -->
							<view class="wrap" v-if="item.body === 'tixing'">
								<u-row gutter="16" justify="space-between">
									<u-col span="4" v-for="tx in tixingData" @click="selectTiXing(tx)">
										<view class="demo-layout2 bg-purple-light" :class="{select_Border: tx.selected}">
											<image :src="tx.src" mode="aspectFit"></image>
										</view>
										<view class="wrap_text">{{ tx.name }}</view>
									</u-col>
								</u-row>
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
			</view>
		</block>

		<view class="list">
			<!-- 照片 -->
			<view class="photo_area">
				<view class="start">
					<view class="title">照片 <span style="color: #999999;font-size: 22upx;">（上传你的照片及常逛网店二维码以便于搭配师为你更精确的搭配）</span></view>
					<zh-upFile :config='config' :closeImg="closeImg" :background='certImgshow' :type='0' width='164rpx' height='164rpx'
					 @upLoadFile='upImgcard' @fileListChange="fileListChange" :upFileType="2" :values="imgList">
					</zh-upFile>
				</view>
			</view>
		</view>

		<view class="btn_area mocup_btn" @click="$u.throttle(createPlan, 500)">完成</view>
	</view>
</template>

<script>
	import app from '../../../App.vue'
	import zhUpFile from '@/components/zh-upFile'
	import {
		isBlank
	} from '@/utils/common.js'

	export default {
		data() {
			return {
				form: {},
				config: {
					count: 3, // 上传图片张数
					sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				},
				certImgshow: '/static/img/img_pla.png',
				closeImg: '/pagesB/static/img/img_delete.png',
				postData: {
					token: '',
					key: ''
				},
				imgList: [], // 用户图片
				jobList: [], // 工作选择
				budgetList: [], // 预算选择
				occasionList: [], // 出席场合
				sexList: [{
						label: '男士',
						value: 0
					},
					{
						label: '女士',
						value: 0
					}
				],
				current: 1,
				remark: '',
				itemList: [{
					head: "脸型",
					body: "lianxing",
					open: true,
				}, {
					head: "肤色",
					body: "fuse",
					open: false,
				}, {
					head: "体型",
					body: "tixing",
					open: false,
				}],
				// 分为男女 0.男 1.女
				// 脸型数据
				lianxingData: [],
				// 肤色数据
				fuseData: [],
				// 体型数据
				tixingData: [],	
				// 页面跳转路径
				from: ''
			};
		},
		components: {
			'zh-upFile': zhUpFile
		},
		onLoad(options) {
			this.getUserInfo()
			this.getDictionary()
			
			if(options.from) {
				this.from = options.from
			}
		},
		methods: {
			isBlank,
			// 获取我的穿搭资料
			getUserInfo() {
				this.$u.api.getWearData().then(res => {
					if (res.code === 200) {
						if (res.data === null) {
							this.form = {
								age: null,
								budget: '',
								height: null,
								weight: null,
								job: "",
								photos: "",
								remark: "",
								sex: null,
								face: null,
								shape: null,
								skinColour: null,
								brand: '',
								occasion: ''
							}
						} else {
							this.form = res.data
							// 回显图片
							if(!isBlank(this.form.photos)) {
								let list = JSON.parse(this.form.photos)
								for(let i in list) {
									let arr = {
										url: list[i]
									}
									this.imgList.push(arr)
								}
							}
							
							// 判断性别
							if (this.form.sex === 0) {
								// 男
								this.tixingData = [{
									src: app.globalData.base_ImgUrl + 'ques4_01_man.png',
									name: '长方形',
									value: 0,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_02_man.png',
									name: '正三角形',
									value: 1,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_03_man.png',
									name: '椭圆形',
									value: 2,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_04_man.png',
									name: '倒三角形',
									value: 3,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_05_man.png',
									name: '倒梯形',
									value: 4,
									selected: false,
								}, ];
								
								this.lianxingData = [{
									src: app.globalData.base_ImgUrl + 'ques2_01_man.png',
									name: '圆脸',
									value: 0,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques2_02_man.png',
									name: '鹅蛋脸',
									value: 1,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques2_03_man.png',
									name: '瓜子脸',
									value: 2,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques2_04_man.png',
									name: '方脸',
									value: 3,
									selected: false,
								}]
								
								this.fuseData = [{
									src: app.globalData.base_ImgUrl + 'ques3_01_man.png',
									name: '偏白',
									selected: false,
									value: 0
								}, {
									src: app.globalData.base_ImgUrl + 'ques3_02_man.png',
									name: '红润',
									selected: false,
									value: 1
								}, {
									src: app.globalData.base_ImgUrl + 'ques3_03_man.png',
									name: '偏黄',
									selected: false,
									value: 2
								}, {
									src: app.globalData.base_ImgUrl + 'ques3_04_man.png',
									name: '小麦色',
									selected: false,
									value: 3
								}]
							} else if (this.form.sex === 1) {
								// 女
								this.tixingData = [{
									src: app.globalData.base_ImgUrl + 'ques4_01.png',
									name: '苹果型',
									value: 5,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_02.png',
									name: 'H型',
									value: 6,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_03.png',
									name: '梨型',
									value: 7,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_04.png',
									name: '沙漏型',
									value: 8,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_05.png',
									name: 'H型2',
									value: 9,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques4_06.png',
									name: 'V型',
									value: 10,
									selected: false,
								}];

								this.lianxingData = [{
									src: app.globalData.base_ImgUrl + 'ques2_01.png',
									name: '圆脸',
									value: 4,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques2_02.png',
									name: '鹅蛋脸',
									value: 5,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques2_03.png',
									name: '瓜子脸',
									value: 6,
									selected: false,
								}, {
									src: app.globalData.base_ImgUrl + 'ques2_04.png',
									name: '方脸',
									value: 7,
									selected: false,
								}]

								this.fuseData = [{
									src: app.globalData.base_ImgUrl + 'ques3_01.png',
									name: '偏白',
									selected: false,
									value: 4
								}, {
									src: app.globalData.base_ImgUrl + 'ques3_02.png',
									name: '红润',
									selected: false,
									value: 5
								}, {
									src: app.globalData.base_ImgUrl + 'ques3_03.png',
									name: '偏黄',
									selected: false,
									value: 6
								}, {
									src: app.globalData.base_ImgUrl + 'ques3_04.png',
									name: '小麦色',
									selected: false,
									value: 7
								}]
							}
							
							// 遍历选中
							for(let i in this.tixingData) {
								if(this.form.shape === this.tixingData[i].value) {
									this.tixingData[i].selected = true
								}
							}
							for(let i in this.lianxingData) {
								if(this.form.face === this.lianxingData[i].value) {
									this.lianxingData[i].selected = true
								}
							}
							for(let i in this.fuseData) {
								if(this.form.skinColour === this.fuseData[i].value) {
									this.fuseData[i].selected = true
								}
							}
						}
					}
				})
			},
			async getDictionary() {
				var param1 = {
					dicType: 'job'
				}
				await this.$u.api.findDicByType(param1).then(res => {
					if (res.code === 200) {
						this.jobList = res.data
					}
				})
				var param2 = {
					dicType: 'budget'
				}
				await this.$u.api.findDicByType(param2).then(res => {
					if (res.code === 200) {
						this.budgetList = res.data
					}
				})
				
				var param3 = {
					dicType: 'occasions'
				}
				await this.$u.api.findDicByType(param3).then(res => {
					if (res.code === 200) {
						this.occasionList = res.data
					}
				})
			},
			// 选择职业
			bindPickerChange1: function(e) {
				this.form.job = this.jobList[e.target.value].value
			},
			// 选择性别
			bindPickerChange2: function(e) {
				this.form.sex = Number(e.target.value)
				// 选择性别后 重新调整shape体型 face脸型 skinColour肤色数据
				this.form.shape = null
				this.form.face = null
				this.form.skinColour = null
				if (this.form.sex === 0) {
					// 男
					this.tixingData = [{
						src: app.globalData.base_ImgUrl + 'ques4_01_man.png',
						name: '长方形',
						value: 0,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_02_man.png',
						name: '正三角形',
						value: 1,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_03_man.png',
						name: '椭圆形',
						value: 2,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_04_man.png',
						name: '倒三角形',
						value: 3,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_05_man.png',
						name: '倒梯形',
						value: 4,
						selected: false,
					}, ];

					this.lianxingData = [{
						src: app.globalData.base_ImgUrl + 'ques2_01_man.png',
						name: '圆脸',
						value: 0,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques2_02_man.png',
						name: '鹅蛋脸',
						value: 1,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques2_03_man.png',
						name: '瓜子脸',
						value: 2,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques2_04_man.png',
						name: '方脸',
						value: 3,
						selected: false,
					}]

					this.fuseData = [{
						src: app.globalData.base_ImgUrl + 'ques3_01_man.png',
						name: '偏白',
						selected: false,
						value: 0
					}, {
						src: app.globalData.base_ImgUrl + 'ques3_02_man.png',
						name: '红润',
						selected: false,
						value: 1
					}, {
						src: app.globalData.base_ImgUrl + 'ques3_03_man.png',
						name: '偏黄',
						selected: false,
						value: 2
					}, {
						src: app.globalData.base_ImgUrl + 'ques3_04_man.png',
						name: '小麦色',
						selected: false,
						value: 3
					}]

				} else if (this.form.sex === 1) {
					// 女
					this.tixingData = [{
						src: app.globalData.base_ImgUrl + 'ques4_01.png',
						name: '苹果型',
						value: 5,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_02.png',
						name: 'H型',
						value: 6,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_03.png',
						name: '梨型',
						value: 7,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_04.png',
						name: '沙漏型',
						value: 8,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_05.png',
						name: 'H型2',
						value: 9,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques4_06.png',
						name: 'V型',
						value: 10,
						selected: false,
					}];

					this.lianxingData = [{
						src: app.globalData.base_ImgUrl + 'ques2_01.png',
						name: '圆脸',
						value: 4,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques2_02.png',
						name: '鹅蛋脸',
						value: 5,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques2_03.png',
						name: '瓜子脸',
						value: 6,
						selected: false,
					}, {
						src: app.globalData.base_ImgUrl + 'ques2_04.png',
						name: '方脸',
						value: 7,
						selected: false,
					}]

					this.fuseData = [{
						src: app.globalData.base_ImgUrl + 'ques3_01.png',
						name: '偏白',
						selected: false,
						value: 4
					}, {
						src: app.globalData.base_ImgUrl + 'ques3_02.png',
						name: '红润',
						selected: false,
						value: 5
					}, {
						src: app.globalData.base_ImgUrl + 'ques3_03.png',
						name: '偏黄',
						selected: false,
						value: 6
					}, {
						src: app.globalData.base_ImgUrl + 'ques3_04.png',
						name: '小麦色',
						selected: false,
						value: 7
					}]
				}
			},
			// 选择预算
			bindPickerChange3: function(e) {
				this.form.budget = this.budgetList[e.target.value].value
			},
			// 选择出席场合
			bindPickerChange4: function(e) {
				this.form.occasion = this.occasionList[e.target.value].value
			},
			// 上传本人图片
			upImgcard(res) {
				var _this = this

				uni.showLoading({
					title: '上传中...'
				});

				let tempFilePaths = res.tempFilePaths

				_this.$u.api.getPostingQiniuToken().then(res => {
					if (res.code === 200) {
						_this.postData.token = JSON.parse(res.data).qiniuToken
						// 开始上传
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.postData.key = _this.$u.guid() // 随机key	

							uni.uploadFile({
								url: 'https://upload-Z2.qiniup.com', //华南地区用这个
								filePath: tempFilePaths[i],
								name: 'file',
								formData: {
									'key': _this.postData.key,
									'token': _this.postData.token
								},
								success: (uploadFileRes) => {
									let img = "https://posting.imguangguang.com/" + JSON.parse(uploadFileRes.data).key
									let arr = {
										url: img
									}

									if (_this.imgList.length >= 3) {
										uni.showToast({
											title: "最多上传3张图片",
											icon: "none"
										})
										uni.hideLoading()
										return false
									}

									_this.imgList.push(arr)
									// 组装form数据
									let list = []
									for (let i in _this.imgList) {
										list.push(_this.imgList[i].url)
									}
									_this.form.photos = JSON.stringify(list)
								},
								fail: (error) => {
									if (error && error.response) {
										uni.showToast({
											title: error.response,
											icon: 'none'
										})
									}
								},
								complete: () => {
									setTimeout(function() {
										uni.hideLoading();
									}, 250);
								},
							});
						}
					}
				})
			},
			fileListChange(data) {
				this.imgList = data.fileList

				let list = []
				for (let i in this.imgList) {
					list.push(this.imgList[i].url)
				}
				this.form.photos = JSON.stringify(list)
			},
			// 选择脸型
			selectLianXing(e) {
				for (let i in this.lianxingData) {
					if (this.lianxingData[i].name === e.name) {
						this.lianxingData[i].selected = true
						this.form.face = this.lianxingData[i].value
					} else {
						this.lianxingData[i].selected = false
					}
				}
			},
			// 选择肤色
			selectFuse(e) {
				for (let i in this.fuseData) {
					if (this.fuseData[i].name === e.name) {
						this.fuseData[i].selected = true
						this.form.skinColour = this.fuseData[i].value
					} else {
						this.fuseData[i].selected = false
					}
				}
			},
			// 选择体型
			selectTiXing(e) {
				for (let i in this.tixingData) {
					if (this.tixingData[i].name === e.name) {
						this.tixingData[i].selected = true
						this.form.shape = this.tixingData[i].value
					} else {
						this.tixingData[i].selected = false
					}
				}
			},
			// 创建方案
			createPlan() {
				// 处理数据
				this.form.height = Number(this.form.height)
				this.form.weight = Number(this.form.weight)
				this.form.age = Number(this.form.age)

				this.$u.api.editWearData(this.form).then(res => {
					if (res.code === 200) {
						if(!isBlank(this.from)) {
							this.$refs.uToast.show({
								title: '保存成功',
								type: 'success',
								duration: 500,
								back: false,
								callback: function() {
									const pages = getCurrentPages(); // 获取页面栈
									const beforePage = pages[pages.length - 2]; //前一个页面
									
									setTimeout(function(){ 
										beforePage.$vm.chat(); 
									}, 1000);
								}
							})
						}else {
							this.$refs.uToast.show({
								title: '保存成功',
								type: 'success',
								duration: 500,
								back: true
							})
						}	
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.icon {
		font-size: 30upx;
	}

	.title {
		font-size: 32upx;
		color: #333;
		font-weight: bold;
	}

	.out_title {
		font-size: 30upx;
		font-weight: bold;
		color: #555555;
		padding: 16upx 0 12upx 0;
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border-radius: 12upx;
		padding: 32upx 30upx 43upx 30upx;

		.info_content {
			margin: 32upx 0;
			padding: 0 20upx;
			background-color: white;
			display: flex;
			flex-wrap: wrap;
			border-radius: 12upx;

			view {
				display: flex;
			}

			.input_pla {
				color: #666666;
				font-size: 28upx;
			}

			picker {
				width: 100%;
			}

			.row {
				padding: 16upx 0;
				width: 100%;

				.nominal {
					width: 20%;
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
					align-items: center;
				}

				.input {
					width: 80%;
					padding: 10upx 0;
					display: flex;
					align-items: center;
					font-size: 28upx;

					input {
						width: 100%;
						text-align: right;
					}
				}

				.flex_index {
					display: flex;
					justify-content: flex-end;
					align-items: center;

					.text {
						font-size: 28upx;
						color: #666666;
						padding-right: 10upx;
					}
				}
			}
		}

		.list {
			background: white;

			.row {
				padding: 32upx 20upx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&:last-child {
					border-bottom: none;
				}

				.right {
					display: flex;
					align-items: center;
					color: #999;

					.tis {
						font-size: 26upx;
						margin-right: 5upx;
						max-height: 120upx;

						image {
							width: 100upx;
							height: 100upx;
							border-radius: 100%;
							margin: 10upx 0;
						}
					}

					.icon {
						width: 42upx;
						color: #909090;
					}
				}

			}
		}
	}

	.photo_area {
		background: white;
		padding: 36upx 30upx 24upx 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: 28upx;
			font-weight: bold;
			padding-bottom: 12upx;
		}


		.start {
			.cetifica_img {
				width: 164upx;
				height: 164upx;
				background: #F4F4F4;
				border-radius: 8px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}


	// 更多选择

	// 选中样式
	.select_Border {
		border: 3px solid #B1BEFD;
		border-radius: 20upx;
	}

	.wrap {
		padding: 0upx;

		.u-row {
			margin: 20rpx 0;
		}

		.demo-layout {
			height: 335upx;
			margin-bottom: 20upx;
			border-radius: 12x;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 191upx;
				height: 220upx;
			}
		}

		.demo-layout2 {
			height: 216upx;
			margin-bottom: 20upx;
			border-radius: 12x;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 51upx;
				height: 161upx;
			}
		}

		.wrap_text {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 12upx 0 25upx 0;
			color: #666666;
			font-size: 26upx;
		}

		.bg-purple-light {
			background: white;
		}
	}


	.btn_area {
		width: 310upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		margin: 53upx auto 0 auto;
	}
</style>
